<template>
  <div>
    <div class="search_box">
      <el-input v-model="pag.name" placeholder="配件名"></el-input>
      <el-date-picker
        v-model="pag.entry_time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="primary" @click="getList">搜索</el-button>
      <el-button @click="resetSearch">重置</el-button>
    </div>
    <div class="export_box">
      <el-button type="primary" @click="printListData">数据导出</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" :height="h" border>
      <el-table-column prop="issue_time" label="出库日期" align="center">
      </el-table-column>
      <el-table-column prop="type1" label="配件总类别" align="center">
      </el-table-column>
      <el-table-column prop="type2" label="配件子类别" align="center">
      </el-table-column>
      <el-table-column prop="name" label="配件名称" width="120" align="center">
      </el-table-column>
      <el-table-column prop="type3" label="出库类型" align="center">
      </el-table-column>
      <el-table-column prop="units" label="计量单位" align="center">
      </el-table-column>
      <el-table-column prop="num" label="出库数量" align="center">
      </el-table-column>
      <el-table-column prop="unit_price" label="出库单价" align="center">
      </el-table-column>
      <el-table-column prop="total_price" label="总金额" align="center">
      </el-table-column>
      <el-table-column prop="issue_person" label="出库人" align="center">
      </el-table-column>
      <el-table-column prop="receiving" label="接受单位" align="center">
      </el-table-column>
      <el-table-column prop="use_plate" label="使用车辆" align="center">
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="revoked(scope.row)">撤销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page_table">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pag.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getDataByKey, openDB, changeDB, deleteDB, editDB } from "@/db/indexdb";
import { searchTable } from "@/db/search";
import { printData } from "@/db/print";
import Item from "@/layout/components/Sidebar/Item.vue";

export default {
  data() {
    return {
      tableData: [],
      pag: {
        name: "",
        time: [],
        total: 0,
        page: 1,
        size: 10,
      },
      h: "",
      totalList: [],
    };
  },
  created() {
    openDB("car", "list").then(() => {
      this.getList();
    });
    this.h = document.documentElement.offsetHeight - 270;
  },
  methods: {
    printListData() {
      let header = [
        { value: "issue_time", label: "出库时间", first: 1 },
        { value: "type1", label: "配件总类别" },
        { value: "type2", label: "配件子类别" },
        { value: "name", label: "配件名称" },
        { value: "type3", label: "出库类型" },
        { value: "num", label: "出库数量", type: "n", total: 1 },
        { value: "units", label: "计量单位" },
        { value: "unit_price", label: "出库单价", type: "n" },
        { value: "total_price", label: "总金额", type: "n", total: 1 },
        { value: "entry_name", label: "出库人" },
        { value: "receiving", label: "接受单位" },
        { value: "use_plate", label: "使用车辆" },
        { value: "remark", label: "备注" },
      ];
      let msg = {
        msg1: "出库明细表",
      };
      printData(msg, this.totalList, header);
    },
    resetSearch() {
      this.pag = {
        name: "",
        entry_time: [],
        total: 0,
        page: 1,
        size: 10,
      };
      this.getList();
    },
    getList() {
      getDataByKey("list", "出入库明细表").then((res) => {
        let { total, list, totalList } = searchTable(res?.data, this.pag, 1);
        this.totalList = totalList;
        this.pag.total = total;
        this.tableData = list;
      });
    },
    handleSizeChange(val) {
      this.pag.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pag1.page = val;
      this.getList();
    },
    revoked(row) {
      this.$confirm("确定撤销该条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          getDataByKey("list", "库存表").then((res) => {
            let result = res?.data.filter((item) => {
              return item.id == row.accessories_id;
            })[0];
            result.num = Number(result.num || 0) + Number(row.num || 0);
            editDB("list", "库存表", result).then((res) => {
              deleteDB("list", "出入库明细表", row.id).then(() => {
                this.getList();
                this.$message.success("已撤销");
              });
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.search_box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  .el-input,
  .el-select {
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-date-editor {
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-button {
    margin-bottom: 20px;
  }
}
.export_box {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.page_table {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
